<template>
  <div class="a_z_monitor">
    <a-button type="primary" icon="redo" class="refresh" @click="refresh">刷新</a-button>
    <p>所有经纪人数据：</p>
    <a-table :columns="columns" :data-source="data">
      <a-button
        slot="action"
        type="primary"
        slot-scope="text"
        @click="showData(text.description)"
      >趋势图</a-button>
    </a-table>
    <a-card class="chart" v-if="show">
      <linechart :chartsData="description"></linechart>
    </a-card>
  </div>
</template>

<script>
import linechart from '@/components/charts/line-chart.vue'
const columns = [
  { title: '主播姓名', dataIndex: 'anchorname', key: 'anchorname' },
  { title: '昨日流水', dataIndex: 'last_day_stream', key: 'last_day_stream' },
  { title: '本月新增流水', dataIndex: 'new_add_stream', key: 'new_add_stream' },
  {
    title: '本月新增主播个数',
    dataIndex: 'new_anchor_num',
    key: 'new_anchor_num'
  },
  {
    title: '本月新增主播流水',
    dataIndex: 'new_anchor_stream',
    key: 'new_anchor_stream'
  },
  {
    title: 'Action',
    dataIndex: '',
    key: 'x',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    key: 1,
    anchorname: 'John Brown',
    last_day_stream: 32133,
    new_add_stream: '13213',
    new_anchor_num: 123,
    new_anchor_stream: 12313,
    description: {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }
      ]
    }
  },
  {
    key: 2,
    anchorname: 'John Brown',
    last_day_stream: 32133,
    new_add_stream: '13213',
    new_anchor_num: 123,
    new_anchor_stream: 12313,
    description: {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }
      ]
    }
  },
  {
    key: 3,
    anchorname: 'John Brown',
    last_day_stream: 32133,
    new_add_stream: '13213',
    new_anchor_num: 123,
    new_anchor_stream: 12313,
    description: {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }
      ]
    }
  },
  {
    key: 4,
    anchorname: 'John Brown1',
    last_day_stream: 32133,
    new_add_stream: '13213',
    new_anchor_num: 123,
    new_anchor_stream: 12313,
    description: {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }
      ]
    }
  },
  {
    key: 5,
    anchorname: 'John Brown',
    last_day_stream: 32133,
    new_add_stream: '13213',
    new_anchor_num: 123,
    new_anchor_stream: 12313,
    description: {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }
      ]
    }
  },
  {
    key: 6,
    anchorname: 'John Brown',
    last_day_stream: 32133,
    new_add_stream: '13213',
    new_anchor_num: 123,
    new_anchor_stream: 12313,
    description: {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }
      ]
    }
  },
  {
    key: 7,
    anchorname: 'John Brown',
    last_day_stream: 32133,
    new_add_stream: '13213',
    new_anchor_num: 123,
    new_anchor_stream: 12313,
    description: {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }
      ]
    }
  },
  {
    key: 8,
    anchorname: 'John Brown',
    last_day_stream: 32133,
    new_add_stream: '13213',
    new_anchor_num: 123,
    new_anchor_stream: 12313,
    description: {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }
      ]
    }
  }
]

export default {
  data () {
    return {
      data,
      columns,
      show: false,
      description: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          }
        ]
      }
    }
  },
  components: {
    linechart
  },
  methods: {
    refresh () {
      console.log('刷新了')
    },
    showData (item) {
      this.show = !this.show
      this.description = item
    }
  }
}
</script>

<style lang='scss' scoped>
.refresh {
  margin-bottom: 1em;
}
.chart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
